<html>
<head>
<script src="json2.js"></script>
<script lang="Javascript">
var completeList = ['name','myEmail','passwordHash','pin','gameId','theirEmail','word','letters','index'];

Array.prototype.contains = function(obj) {
    var i = this.length;
    while (i--) {
        if (this[i] === obj) {
            return true;
        }
    }
    return false;
}

function showHideDivs(toShow) {
	for (var i=0; i<completeList.length; i++)  {
		var field = completeList[i];
		if (document.getElementById(field+"Div")) {
			document.getElementById(field+"Div").style.display = toShow.contains(field) ? "block" : "none";
		}
	}
}

function showHideFields() {
	var action = document.getElementById("action").value;
	if (actionFieldMap[action] != undefined) {
		showHideDivs(actionFieldMap[action]);
	}
}

function assembleParams() {
	var action = document.getElementById("action").value;
	var params = {"action":action};
	if (actionFieldMap[action] != undefined) {
		for (var i=0; i<actionFieldMap[action].length; i++) {
			params[actionFieldMap[action][i]] = document.getElementsByName(actionFieldMap[action][i])[0].value;
		}
	}
	return params;
}

var actionFieldMap = {"createUser":['name','myEmail','passwordHash'],
		"signIn":['myEmail','passwordHash'],
		"startGameWith":['myEmail','pin','theirEmail'],
		"getGameWith":['myEmail','pin','theirEmail'],
		"getTheirLastGuess":['myEmail','pin','gameId','index'],
		"enterSecretWord":['myEmail','pin','gameId','word'],
		"guessWord":['myEmail','pin','gameId','word'],
		"crossLetters":['myEmail','pin','gameId','letters'],
		"circleLetters":['myEmail','pin','gameId','letters'],
		"unmarkLetters":['myEmail','pin','gameId','letters'],
		"listCurrentGames":['myEmail','pin'],
		"checkWord":['word'],
		"populateWords":[]};

function sendRequest() {
	var xmlHttpReq = false;
	var self = this;
	// Mozilla/Safari
	if (window.XMLHttpRequest) {
		self.xmlHttpReq = new XMLHttpRequest();
	}
	// IE
	else if (window.ActiveXObject) {
		self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
	}
	self.xmlHttpReq.open('POST', 'wordduel', true);
	self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	self.xmlHttpReq.onreadystatechange = function() {
		if (self.xmlHttpReq.readyState == 4) {
			document.getElementById('result').innerHTML = self.xmlHttpReq.responseText;
		}
	}
	self.xmlHttpReq.send(JSON.stringify(assembleParams()));
}		
</script>
</head>
<body onLoad="showHideFields()">
	<div>
		<select id="action" name="action" onChange="showHideFields()">
			<option value="createUser">Create User</option>
			<option value="signIn">Sign In</option>
			<option value="startGameWith">Start Game With</option>
			<option value="getGameWith">Get Game With</option>
			<option value="getTheirLastGuess">Get Their Last Guess</option>
			<option value="enterSecretWord">Enter Secret Word</option>
			<option value="guessWord">Guess Word</option>
			<option value="crossLetters">Cross Letters</option>
			<option value="circleLetters">Circle Letters</option>
			<option value="unmarkLetters">Unmark Letters</option>
			<option value="listCurrentGames">List Current Games</option>
			<option value="checkWord">Check Word</option>
			<!-- <option value="populateWords">Populate Valid Words</option> -->
		</select>
		<div id="nameDiv">
			Your Name:<input name="name" />
		</div>
		<div id="myEmailDiv">
			Your Email:<input name="myEmail" />
		</div>
		<div id="passwordHashDiv">
			Your Password Hash:<input name="passwordHash" />
		</div>
		<div id="pinDiv">
			Pin:<input name="pin" />
		</div>
		<div id="gameIdDiv">
			Game Id:<input name="gameId" />
		</div>
		<div id="theirEmailDiv">
			Their Email:<input name="theirEmail" />
		</div>
		<div id="wordDiv">
			Word:<input name="word" />
		</div>
		<div id="lettersDiv">
			Letters:<input name="letters" />
		</div>
		<div id="indexDiv">
			Index:<input name="index" />
		</div>
		<input value="Submit" type="button" onClick="sendRequest()" />
	</div>
	<div id="result"></div>
</body>
</html>